<template>
  <div class="page_server_property_monitor">
    <!-- <let-radio v-model="query.userpc" :label="0">JSON查询</let-radio>
    <let-radio v-model="query.userpc" :label="1">RPC查询</let-radio> -->
    <let-form inline itemWidth="200px" @submit.native.prevent="search">
      <let-form-group>
        <let-form-item :label="$t('monitor.search.a')">
          <let-date-picker size="small" v-model="query.thedate" :formatter="formatter"></let-date-picker>
        </let-form-item>
        <let-form-item :label="$t('monitor.search.b')">
          <let-date-picker size="small" v-model="query.predate" :formatter="formatter"></let-date-picker>
        </let-form-item>
        <let-form-item :label="$t('monitor.search.start')">
          <let-input size="small" v-model="query.startshowtime"></let-input>
        </let-form-item>
        <let-form-item :label="$t('monitor.search.end')">
          <let-input size="small" v-model="query.endshowtime"></let-input>
        </let-form-item>
      </let-form-group>
      <let-form-group>
        <tars-form-item :label="$t('monitor.search.master')" @onLabelClick="groupBy('master_name')">
          <let-input size="small" v-model="query.master_name"></let-input>
        </tars-form-item>
        <tars-form-item :label="$t('monitor.search.masterIP')" @onLabelClick="groupBy('master_ip')">
          <let-input size="small" v-model="query.master_ip"></let-input>
        </tars-form-item>
        <tars-form-item :label="$t('monitor.select.property')" @onLabelClick="groupBy('property_name')">
          <let-input size="small" v-model="query.property_name"></let-input>
        </tars-form-item>
        <tars-form-item :label="$t('monitor.select.strategy')" @onLabelClick="groupBy('policy')">
          <let-input size="small" v-model="query.policy"></let-input>
        </tars-form-item>
        <let-form-item>
          <let-button size="small" type="submit" theme="primary">{{$t('operate.search')}}</let-button>
        </let-form-item>
      </let-form-group>
    </let-form>

    <compare-chart ref="chart" class="chart" v-bind="chartOptions" v-if="showChart"></compare-chart>

    <hours-filter v-if="enableHourFilter" v-model="hour"></hours-filter>

    <let-table ref="table" :data="pagedItems" :empty-msg="$t('common.nodata')">
      <let-table-column :title="$t('common.time')" width="90px">
        <template slot-scope="props">{{props.row.show_time || props.row.show_date}}</template>
      </let-table-column>
      <let-table-column :title="$t('monitor.search.master')">
        <template slot-scope="props">
          <span v-if="props.row.master_name != '%'">{{props.row.master_name}}</span>
          <span class="btn-link" v-if="props.row.master_name == '%'" @click="groupBy('master_name', props.row)" >{{props.row.master_name}}</span>
        </template>
      </let-table-column>
      <let-table-column :title="$t('monitor.search.masterIP')" width="150px">
        <template slot-scope="props">
          <span v-if="props.row.master_ip != '%'">{{props.row.master_ip}}</span>
          <span class="btn-link" v-if="props.row.master_ip == '%'" @click="groupBy('master_ip', props.row)" >{{props.row.master_ip}}</span>
        </template>
      </let-table-column>
      <let-table-column :title="$t('monitor.select.property')" width="150px">
         <template slot-scope="props">
          <span v-if="props.row.property_name != '%'">{{props.row.property_name}}</span>
          <span class="btn-link" v-if="props.row.property_name == '%'" @click="groupBy('property_name', props.row)" >{{props.row.property_name}}</span>
        </template>
      </let-table-column>
      <let-table-column :title="$t('monitor.select.strategy')" width="150px">
        <template slot-scope="props">
          <span v-if="props.row.policy != '%'">{{props.row.policy}}</span>
          <span class="btn-link" v-if="props.row.policy == '%'" @click="groupBy('policy', props.row)" >{{props.row.policy}}</span>
        </template>
      </let-table-column>
      <let-table-column :title="$t('monitor.property.property')" prop="the_value" align="right" width="200px"></let-table-column>
      <let-table-column :title="$t('monitor.property.propertyC')" prop="pre_value" align="right" width="230px"></let-table-column>

      <let-pagination
        slot="pagination"
        v-if="pageCount"
        :total="pageCount"
        :page="page"
        :sum="itemsCount"
        show-sums
        jump
        @change="changePage"
      ></let-pagination>
    </let-table>
  </div>
</template>

<script>
import { formatDate, ONE_DAY } from '@/lib/date';
import HoursFilter from '@/components/hours-filter';
import CompareChart from '@/components/charts/compare-chart';

const pageSize = 20;
const formatter = 'YYYYMMDD';
const dataFormatter = (data) => {
  if (data && data.length > 0) {
    return data.map(item => {
      const result = { ...item };
      const keys = Object.keys(item);
      const preRegex = /^pre_.*/;
      const theRegex = /^the_.*/;
      keys.forEach(key => {
        if (preRegex.test(key) || theRegex.test(key)) {
          if (item[key] === "--") {
            result[key] = "0";
          }
        }
      });
      return result;
    });
  } else {
    return data;
  }
};


export default {
  name: 'ServerPropertyMonitor',

  components: {
    HoursFilter,
    CompareChart,
  },

  data() {
    const treeId = this.$route.params.treeid;

    return {
      query: {
        // userpc: 0,
        thedate: formatDate(new Date(), formatter),
        predate: formatDate(Date.now() - ONE_DAY, formatter),
        startshowtime: '0000',
        endshowtime: '2360',
        master_name: treeId.split('.').map(d => d.replace(/^\d+/, '')).join('.'),
        master_ip: '',
        property_name: '',
        policy: '',
        group_by: '',
      },
      formatter,
      allItems: [],
      hour: -1,
      page: 1,
      showChart: true,
    };
  },

  computed: {
    enableHourFilter(){
      return this.allItems.length && this.allItems[0].show_time
    },
    filteredItems() {
      const hour = this.hour;
      return (hour >= 0 && this.enableHourFilter)
        ? this.allItems.filter(d => +d.show_time.slice(0, 2) === hour)
        : this.allItems;
    },
    itemsCount() {
      return this.filteredItems.length;
    },
    pageCount() {
      return Math.ceil(this.filteredItems.length / pageSize);
    },
    pagedItems() {
      return this.filteredItems.slice(pageSize * (this.page - 1), pageSize * this.page);
    },
    chartOptions() {
      return {
        title: this.$t('monitor.table.total'),
        timeColumn: 'show_time',
        dataColumns: [
          { name: 'the_value', label: this.$t('monitor.property.property') },
          { name: 'pre_value', label: this.$t('monitor.property.propertyC') },
        ],
        data: this.allItems,
      };
    },
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    fetchData() {
      const chartLoading = this.$refs.chart && this.$refs.chart.$loading.show();
      const tableLoading = this.$refs.table.$loading.show();
      return this.$ajax.getJSON('/server/api/tarsproperty_monitor_data', this.query).then((data) => {
        chartLoading && chartLoading.hide();
        tableLoading.hide();
        this.allItems = data;
      }).catch((err) => {
        chartLoading && chartLoading.hide();
        tableLoading.hide();
        this.$tip.error(`${this.$t('common.error')}: ${err.message || err.err_msg}`);
      });
    },

    groupBy(name, row) {
      this.query.group_by = name;
      this.showChart = false;
      if(row){
        if(row.show_time){
          this.query.startshowtime = row.show_time
          this.query.endshowtime = row.show_time
        }
        if(row.master_name && row.master_name!="%") this.query.master_name = row.master_name
        if(row.master_ip && row.master_ip!="%") this.query.master_ip = row.master_ip
        if(row.property_name && row.property_name!="%") this.query.property_name = row.property_name
        if(row.policy && row.policy!="%") this.query.policy = row.policy
      }
      this.fetchData();
    },

    search() {
      delete this.query.group_by;
      this.showChart = true;
      this.fetchData();
    },

    changePage(page) {
      this.page = page;
    },
  },
};
</script>

<style lang="postcss">
.page_server_property_monitor {
  padding-bottom: 20px;

  .chart {
    margin-top: 20px;
  }

  .hours-filter {
    margin-bottom: 16px;
  }
}
</style>
